<template>
    <div id="index2" v-loading.fullscreen.lock="loading">
        <div style="flex:1">
            <!-- 信息项 -->
            <div id="orderInfo" class="card" v-for="item in orderLists" :key="item.id" @click="orderInfo(item)">
                <tr id="orderItem">
                    <td id="tableItem1">{{item.trainNumber}}</td>
                    <td id="tableItem2">{{item.trainDate}}</td>
                    <td id="tableItem3">{{item.passengerName}}</td>
                    <td id="tableItem4">{{item.status}}</td>
                </tr>
            </div>
            <!-- 新增按钮 -->
            <div id="orderNew" class="card" @click="orderNew()">
                <div></div>
                <div>
                    <i class="iconfont icon-add" style="font-size:44px"></i>
                </div>
                <div></div>
            </div>
        </div>
        <div @click="showLogin()">
            <hr>
            <p id="cntStatus">连接状态: {{userData.message}}</p>
        </div>

        <!-- 车次对话框 -->
        <el-dialog :title="selectList.trainNumber" :visible.sync="showInfo" width="320px" top="20vh">
            <div style="width:100%">
                <div>
                    <div>日期: {{selectList.trainDate}}</div>
                    <div>起始地: {{selectList.fromStationName}}</div>
                    <div>目的地: {{selectList.toStationName}}</div>
                    <div>乘客: {{selectList.passengerName}} 座位: {{selectList.ticketType}}</div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="orderCencel()">删除</el-button>
                <el-button type="primary" @click="orderReturn()">返回</el-button>
            </span>
        </el-dialog>
        <!-- 验证码对话框 -->
        <el-dialog title="登录12306账户" :visible.sync="showCaptch" width="335px" top="20vh">
            <div style="width:100%">
                <table id="captchTable" :style="captchImg">
                    <tr style="height: 32px">
                        <td @click="getCaptch()"></td>
                    </tr>
                    <tr>
                        <td @click="clickCaptch(0)" :class="captchData.pos0 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(1)" :class="captchData.pos1 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(2)" :class="captchData.pos2 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(3)" :class="captchData.pos3 ? 'isSelect':'notSelect'"></td>
                    </tr>
                    <tr>
                        <td @click="clickCaptch(4)" :class="captchData.pos4 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(5)" :class="captchData.pos5 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(6)" :class="captchData.pos6 ? 'isSelect':'notSelect'"></td>
                        <td @click="clickCaptch(7)" :class="captchData.pos7 ? 'isSelect':'notSelect'"></td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="getCaptch()">刷新</el-button>
                <el-button type="primary" @click="userLogin()">登录</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<style>
    @import '../css/Manage.css';

</style>

<script>
    import userInfo from './UserInfo.vue'

    export default {
        components: {
            userInfo
        },

        created: function () {
            this.loading = true;
            this.loginUamtk();

            // 得到订单列表
            this.$axios({
                method: 'post',
                url: '/manage',
                data: {
                    status: 'working'
                }
            }).then((response) => {
                if (response.status === 200) {
                    this.loading = false;
                    if (response.data.status == 'notLogin') {
                        this.$router.push({
                            path: 'login'
                        });
                    } else {
                        this.orderLists = response.data;
                    }
                    return;
                }
            }).catch((error) => {
                this.loading = false;
                this.$message({
                    title: '警告',
                    message: '服务器无响应',
                    type: 'warning'
                });
                this.$router.push({
                    path: 'login'
                });
                return;
            });
        },

        methods: {
            // 验证登录状态
            loginUamtk: function loginUamtk() {
                this.$axios({
                    method: 'post',
                    url: '/uamtk'
                }).then((response) => {
                    if (response.status === 200) {
                        if (response.data.data.flag) {
                            userInfo.infoData.status  = 0;
                            userInfo.infoData.message = '已登录';
                            this.userData.status  = 0;
                            this.userData.message = '已登录';
                        } else {
                            userInfo.infoData.status  = 1;
                            userInfo.infoData.message = '未登录';
                            this.userData.status  = 1;
                            this.userData.message = '未登录';
                        }
                    }
                }).catch((error) => {
                    console.log(error);
                });
            },

            // 显示验证码
            showLogin: function showLogin() {
                if (this.userData.status != 0) {
                    this.getCaptch();
                    this.showCaptch = true;
                } else {
                    this.$message({
                        title: '提示',
                        message: this.userData.message,
                        type: 'info'
                    });
                }
            },

            // 订单信息
            orderInfo: function orderInfo(item) {
                this.selectList = item;
                this.showInfo = true;
            },

            // 新建订单
            orderNew: function orderNew() {
                if (this.userData.status != 0) {
                    this.$message({
                        title: '警告',
                        message: '请先登录12306账户！',
                        type: 'warning'
                    });
                    return;
                }

                const nowDate = new Date();
                const nowHour = nowDate.getUTCHours();
                // 超过订票时间则不查询乘客
                if (15 <= nowHour && nowHour <= 23) {
                    this.$message({
                        title: '警告',
                        message: '未在12306订票时间，无法拉取乘客列表',
                        type: 'warning'
                    });
                    return;
                }

                this.loading = false;
                this.$router.push({
                    path: 'order'
                });
            },

            // 取消订单
            orderCencel: function orderCencel() {
                this.showInfo = false;

                this.$confirm('是否确定停止并删除该订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.$axios({
                        method: 'post',
                        url: '/del',
                        data: this.selectList
                    }).then((response) => {
                        if (response.status === 200) {
                            return;
                        }
                    }).catch((error) => {
                        this.loading = false;
                        this.$message({
                            title: '警告',
                            message: '服务器无响应',
                            type: 'warning'
                        });
                        this.$router.push({
                            path: 'login'
                        });
                        return;
                    });

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            // 返回界面
            orderReturn: function orderReturn() {
                this.showInfo = false;
            },

            // 得到验证码
            getCaptch: function getCaptch() {
                if (this.userData.status != 0) {
                    this.$axios({
                        method: 'post',
                        url: '/captach'
                    }).then((response) => {
                        if (response.status === 200) {
                            this.captchData.pos0 = false;
                            this.captchData.pos1 = false;
                            this.captchData.pos2 = false;
                            this.captchData.pos3 = false;
                            this.captchData.pos4 = false;
                            this.captchData.pos5 = false;
                            this.captchData.pos6 = false;
                            this.captchData.pos7 = false;
                            this.captchData.posStatus = [
                                false, false, false, false, false, false, false, false
                            ]

                            this.captchImg = 'background-image: url(' +
                                'data:image/jpeg;base64,' +
                                response.data + ')';
                        }
                    }).catch((error) => {
                        console.error(error);
                        return false;
                    });
                } else {
                    this.$message({
                        title: '12306信息',
                        message: this.userData.message,
                        type: 'warning'
                    });
                }
            },

            // 选择验证码
            clickCaptch: function clickCaptch(itemID) {
                this.captchData.posStatus[itemID] = !this.captchData.posStatus[itemID];
                this.captchData.pos0 = this.captchData.posStatus[0];
                this.captchData.pos1 = this.captchData.posStatus[1];
                this.captchData.pos2 = this.captchData.posStatus[2];
                this.captchData.pos3 = this.captchData.posStatus[3];
                this.captchData.pos4 = this.captchData.posStatus[4];
                this.captchData.pos5 = this.captchData.posStatus[5];
                this.captchData.pos6 = this.captchData.posStatus[6];
                this.captchData.pos7 = this.captchData.posStatus[7];
            },

            // 登录
            userLogin: function userLogin() {
                this.loading = true;
                this.captchData.captchpos = '';

                let message = '';
                let posStr = '';
                let posX = '';
                let posY = '';

                for (let i = 0; i < this.captchData.posStatus.length; i++) {
                    if (this.captchData.posStatus[i]) {
                        posX = parseInt(37 + (i % 4) * 74);
                        posY = parseInt(40 + (i / 4) * 50);
                        posStr += posX + ',' + posY + ',';
                    }
                    this.captchData.captchpos = posStr.substring(0, posStr.length - 1);
                }

                if (this.captchData.captchpos.length == 0) {
                    this.$message({
                        title: '警告',
                        message: message,
                        type: 'warning'
                    });
                    this.loading = false;
                    return;
                }

                if (this.userData.status == 1) {
                    this.$axios({
                        method: 'post',
                        url: '/connect',
                        data: {
                            pos: this.captchData.captchpos
                        }
                    }).then((response) => {
                        if (response.status === 200) {
                            this.$message({
                                title: '12306信息',
                                message: response.data.result_message,
                                type: 'warning'
                            });
                            userInfo.infoData.status = response.data.result_code;
                            userInfo.infoData.message = response.data.result_message;
                            this.userData.status = response.data.result_code;
                            this.userData.message = response.data.result_message;

                            this.loading = false;
                            this.showCaptch = false;
                            return;
                        }
                    }).catch((error) => {
                        console.error(error);
                        this.loading = false;
                        this.showCaptch = false;
                        return;
                    });
                } else {
                    this.$message({
                        title: '12306信息',
                        message: resInit.result_message,
                        type: 'warning'
                    });
                    this.loading = false;
                    this.showCaptch = false;
                    return;
                }
            }
        },

        data() {
            return {
                userData: userInfo.infoData,
                consoleStatus: '',

                loading: false,
                showInfo: false,
                showCaptch: false,

                orderLists: [],
                selectList: {},

                captchImg: '',

                captchData: {
                    captchpos: '',
                    posStatus: [
                        false, false, false, false, false, false, false, false
                    ],
                    pos0: false,
                    pos1: false,
                    pos2: false,
                    pos3: false,
                    pos4: false,
                    pos5: false,
                    pos6: false,
                    pos7: false,
                }
            }
        },
    };

</script>

